<template>
    <div>
        购物车
    </div>
    <el-row class="dataLayer">  
    <el-col >
      <div class="table-data" :class="{ shake: disabled }">
        <!-- <div class="tit" style="display: flex; display:table;">
          <div class="block" style="display:table-cell; width: 40%; height: 40px;">
            <el-date-picker v-model="value1" type="daterange" range-separator="To" start-placeholder="2022-01-01"
              end-placeholder="2023-12-31" @change="dateChange" value-format="YYYY-MM-DD" />
          </div>
          <div class="mt-4" style="display:table-cell; width: 60%; height: 40px;">
            <el-input v-model="content" placeholder="请输入检索内容" class="input-with-select">
              <template #prepend>
                <el-select v-model="search" placeholder="Select" style="width: 115px">
                  <el-option label="药品名称" value="1" />
                  <el-option label="商品编号" value="2" />
                  <el-option label="社保卡号" value="3" />
                </el-select>
              </template>
              <template #append>
                <el-button :icon="Search"  @click="searchRecord()"/>
              </template>
            </el-input>
          </div>
        </div> -->
        <div>
            <span class="dialog-footer"><el-button @click="deleteByIds()" plain type="primary" size="big">
                  批量删除
                </el-button>
              </span>
              <span class="dialog-footer"><el-button @click="order()" plain type="primary" size="big">
                  下单
                </el-button>
              </span>
        </div>
        <div class="table-box">
          <el-table :data="tableData" :header-cell-style="{
            background: '#FAFBFDFF',
            fontWeight: '400',
            fontSize: '14px',
            padding: '0',
            fontHeight: '36px',
            height: '36px',
          }" :row-style="{
  fontWeight: '400',
  fontSize: '14px',
  padding: '0',
  fontHeight: '44px',
  height: '44px',
  
}"
@selection-change="handleSelectionChangeDepartment"
>          <el-table-column  type="selection" width="60"  />
            <el-table-column v-for="item in options" :key="item.type" :prop="item.props" :label="item.label"
              :width="item.width" :align="item.align" show-overflow-tooltip :fixed="item.fixed">
            </el-table-column>
            <el-table-column label="操作">
              <template #default="props">
                <el-button type="danger" plain  @click="modifyClick(props.row)" size="small">
                  修改
                  <!-- 点击"修改"按钮，触发modifyClick事件，同时传参 -->
                </el-button>
                <span class="dialog-footer"><el-button @click="handleDelete(props.row)" plain type="primary" size="small">
                  移除
                </el-button>
              </span>
                
                <!-- <el-button @click="centerDialogVisible = true">
            
          </el-button> -->
              </template>

            </el-table-column>
          </el-table>
          <el-dialog v-model="centerDialogVisible" title="修改" width="30%" align-center>
            <template #footer>
              <el-form v-model="formData1" label-width="80px">
                <el-form-item label="药品编号">
                  <el-input v-model="formData1.did" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="药品名称">
                  <el-input v-model="formData1.name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="社保卡号">
                  <el-input v-model="formData1.uid" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="单价">
                  <el-input v-model="formData1.price" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="购买数量">
                  <el-input v-model="formData1.number"></el-input>
                </el-form-item>
                <el-form-item label="总价">
                  <el-input v-model="formData1.total" :disabled="true"></el-input>
                </el-form-item>
              </el-form>
              <span class="dialog-footer">
                <el-button type="danger" plain @click="handleModify()">确认</el-button>
                <el-button type="primary" plain @click="centerDialogVisible = false">
                  取消
                </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
        <div style="display: flex;justify-content: center;margin-top: 10px">
          <el-pagination background @size-change="sizeChange" @current-change="currentChange"
            :current-page="pageInfoData.currentPage" :page-size="pageInfoData.pageSize"
            layout="sizes, prev, pager, next, jumper, ->, total, slot" :total="total">
          </el-pagination>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { options } from './options.js'
import {ElNotification} from 'element-plus'
import { useStore } from "vuex";
import {
  noticeLists, getDau,
  getUserCount, getCountAll, getPvNum
} from '../../api/modules/index.js'
import { Flag, Search } from '@element-plus/icons-vue'
import { homeList1 } from '../../api/modules/echart'
import {getShoppingCart,updateCart, deleteCart,orderDrug} from '../../api/modules/shopingcart'
import { deleteRecordById } from '../../api/modules/salerecords'

import router from '../../router'
const search=ref('1')
const content=ref('')
const store = useStore();
const userInfo =ref()
const ids=ref([])
const deleteByIds=async()=>{
    //let list = ref([])
 // list.value.push(row.id)
  console.log(idlist.value);
  let res = await deleteCart(idlist.value);
  if (res.data.data > 0) {
        ElNotification.success("删除成功")
        
        console.log(ids);
    } else {
        ElNotification.error("删除失败")
    }
    
  console.log(res);
 // window.alert("删除成功");
  getPage()
}
const druglist= reactive([])
const order=async()=>{
    //let list = ref([])
 // list.value.push(row.id)
  console.log(druglist.value);
  let res = await orderDrug(druglist.value);
  console.log("---------------");
  console.log(res.data);
  if (res.data.data == "下单成功") {

        ElNotification.success("下单成功")
        deleteByIds();
        console.log(ids);
    } else {
        ElNotification.error("下单失败")
    }
  console.log(res);
 // window.alert("删除成功");
  getPage()
}
const handleModify = async()=>{
  console.log(formData1);
  let res = await updateCart(formData1);
  if (res.data.data > 0) {
        ElNotification.success("修改成功")
    } else {
        ElNotification.error("修改失败")
    }
  centerDialogVisible.value = !centerDialogVisible.value;
  getPage()
  
}
const idlist=reactive([])
const handleSelectionChangeDepartment = (val)=>{
    ids.value=val
    druglist.value =val
    console.log(druglist);
    if(ids.value!=''){
       idlist.value = ids.value.map((obj)=>{
        return obj.id
       })
    console.log(idlist);
    }
}
const centerDialogVisible = ref(false)
const tableData = ref([])
const dau = reactive({
  today: 0,
  yesterday: 0
})
const modifyDiaglog = async () => {

  console.log("---------------");
 centerDialogVisible.value = !centerDialogVisible.value;
}
const modifyClick = (row) => {
  // console.log(row.centerDialogVisible);
    formData1.id  = row.id
    formData1.did = row.did
    formData1.uid = row.uid
    formData1.number = row.number
    formData1.name = row.name
    formData1.total = row.total
    formData1.price = row.price
  modifyDiaglog();

}
const searchRecord =()=>{

  
  if(content.value===''){
    console.log('123----')
    pageInfoData.value.content=content.value
    pageInfoData.value.flag =search.value
    getPage()
  }else{
    pageInfoData.value.content=content.value
    pageInfoData.value.flag =search.value
    console.log(pageInfoData);
    
    getPage()
  }
}
const handleDelete = async (row) => {
  //console.log(row.id);
  //ids.value.push(row.id)
  let list = ref([])
  list.value.push(row.id)
  console.log(list.value);
  let res = await deleteCart(list.value);
  if (res.data.data > 0) {
        ElNotification.success("删除成功")
        
        console.log(ids);
    } else {
        ElNotification.error("删除失败")
    }
  console.log(res);
 // window.alert("删除成功");
  getPage()
}
const formData1 = reactive(
  {   id:'',
      did:'',
      uid:'',
      number: 2,
      name: '银翘片',
      total: 3,
      price:''
  }
)



const commonUse = ref(JSON.parse(sessionStorage.getItem("commonUse")))
const totalUserNum = ref(0)
const disabled = ref(false)
const value1 = ref('')
const handlePush = (to) => {
  router.push(to.path)
}
const dateChange = () => {
  pageInfoData.value.start = value1.value[0];
  pageInfoData.value.end = value1.value[1];
  getPage();
}
const total = ref()
const pageInfoData = ref({
  currentPage: 1,
  pageSize: 5,
  start: '2022-01-01',
  end: '2023-12-31',
  content: content.value,
  flag: search.value,
  securityNum:''    
})

const initData = () => {
  getPage()
  getDauData()
  getUserCountNum()
  getCountAllNum()
  getPvNumInfo()
}

const getPage = async () => {
  //console.log(store.getters.UserInfo.UserInfo);
  console.log(userInfo.value.securityNum);
  if(userInfo.value.securityNum!=''){
    pageInfoData.value.securityNum=userInfo.value.securityNum
  let res = await getShoppingCart(pageInfoData.value) 
  total.value = res.data.data.total
  
  console.log(res.data.data);
  tableData.value = res.data.data.records
    }else{
    total.value = ''
  tableData.value = ''
    }
}
const sizeChange = (val) => {
  pageInfoData.value.pageSize = val;
  getPage()
}
const currentChange = (val) => {
  pageInfoData.value.currentPage = val;
  getPage()
}
const getDauData = async () => {
  let res = await getDau()
  dau.today = res.data.data.today
  dau.yesterday = res.data.data.yesterday
}
const getUserCountNum = async () => {
  let res = await getUserCount()
  totalUserNum.value = res.data.data
}
const countAll = reactive({
  list: [],
  total: 0
})
const getCountAllNum = async () => {
  let res = await getCountAll()
  countAll.list = res.data.data.saleList
  countAll.total = res.data.data.total
}
const pvData = reactive({
  pv: 0,
  yesPv: 0,
  totalPv: 0
})
const getPvNumInfo = async () => {
  let res = await getPvNum()
  pvData.pv = res.data.data.pv
  pvData.yesPv = res.data.data.yesPv
  pvData.totalPv = res.data.data.totalPv
}

onMounted(() => {
if(store.getters.UserInfo.UserInfo != undefined){
    userInfo.value = JSON.parse(store.getters.UserInfo.UserInfo)
  }

  initData()
  disabled.value = true
  setTimeout(() => {
    disabled.value = false
  }, 1500)
})
</script>

<style lang="scss" scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
@import './index.scss';
</style>
